<template>

  <div class="bottom-bat">
    <router-link class="box" to="/newm">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zhuye"></use>
      </svg>
      <span>主页</span>
      
    </router-link>
    <router-link class="box" to="/menu">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-kafei"></use>
      </svg>
      <span>菜单</span>
    </router-link>
    <router-link class="box" to="/tide">
      <svg class="icon icon-three" aria-hidden="true">
        <use xlink:href="#icon-baobao"></use>
      </svg>
      <span>潮品</span>
    </router-link>
    <router-link class="box" to="/shop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gouwuche"></use>
      </svg>
      <span>购物车</span>
    </router-link>
    <router-link class="box" to="/Twoa">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wode"></use>
      </svg>
      <span>我的</span>
    </router-link>

  </div>
  
  
  
</template>

<script>
export default {

}
</script>

<style scoped>
.icon {
  width: 0.22rem;
  height: 0.2rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  color: #959595;
  font-size: 0.2rem;
}
.box{
  display: flex;
  /* justify-content: space-evenly; */
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}
.bottom-bat>span{
  margin-top: 0.08rem;
  font-size: 0.12rem;
}
.router-link-active>.icon{
    color: blue;
}
/* div>.router-link-active>.icon-three{
    width: 0.25rem;
  height: 0.22rem;
}
.bottom-bat>a>.icon-three{
   width: 0.20rem;
  height: 0.18rem;
}  */
/* .bottom-bat>a>svg>use{
  display: block;
font-size: 0.2rem;
} */

.bottom-bat{
  width: 100%;
  background-color: #f7f7f7;
  border-top: 2px solid #dcdcdc;
  height: 0.74rem;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  padding-top: 0.1rem;
  z-index: 1000;
}
</style>